<template>
  <div class="block">
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        pickdata:{
          starttime:'',
          endtime:'',
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: '',
      };
    },
    updated(){
      this.pickdata.starttime=this.value2[0]
      this.pickdata.endtime=this.value2[1]
      this.$emit('event',this.pickdata)
    }
  };
</script>
<!-- <template>
    <div>
      <el-date-picker v-model="myTime" unlink-panels type="datetimerange" range-separator="至"
        :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
      </el-date-picker>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        pickerOptions: {
            disabledDate: time => {
                console.log(11111111111)
                // 限制不能选择今天之后的时间
                if( Date.now() < time.getTime()){
                return true;
                }else {
                // this.userSelectDate 可能是 '',不是一个日期对象;
                // 这个必须要使用括号哈 
                // 如果使用 !this.userSelectDate instanceof Date 仍然是false
                if (!(this.userSelectDate instanceof Date)) {
                    return false
                } else {
                    let currentTime = time.getTime()
                    let userSelectDateTime = this.userSelectDate.getTime()
                    // 获取7天前的时间戳
                    let day7beforeTime = userSelectDateTime - 6*24*60*60*1000
                    // 获取7天后的时间戳
                    let day7AfterTime = userSelectDateTime + 6*24*60*60*1000
                    // 只能选择 7天前和7天后
                    return currentTime > day7AfterTime || currentTime < day7beforeTime
                }
            }
        }
    },
        userSelectDate: '',
        myTime:''
      }
    }
}
</script> -->